{% extends 'task/_task.html' %}
{% block ac_tag %} active actmore {% endblock %}
{% block top_bar %}
<!-- 1 下拉-星图最近 -->
<li class="nav-item dropdown">
    <!-- 备注：这个列表要不要直接在data中定义？另外，这三个下拉列表封装一下？ -->
    {% set times = ['全部', '今天', '近一周', '近一月', '近一季'] %}

    <a class="nav-link dropdown-toggle" role="button" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        {{ times[time_id] }}
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        {% for tm in times %}
        <a class="dropdown-item" href="{{ url_for('.graph', type=type, time_id=loop.index0) }}">
            {{ tm }}
        </a>
        {% endfor %}
    </div>
</li>
<button id="change_chart" class="btn btn-info" href="#">切换</button>&nbsp;
<a id="tag_create" class="btn btn-success" href="#">+新标签</a>
{% endblock %}


{% block show %}
<div id="chart" class="container-fluid showchart"></div>
<!-- 2 标签修改，模态框 -->
<div class="modal fade" id="tagModal" tabindex="-1" role="dialog" aria-labelledby="tagModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <!-- 顶栏 -->
            <div class="modal-header">
                <h5 class="modal-title" id="tagModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- 模态框正文 -->
            <form id="tagForm" action="">
                <div class="alert alert-success" role="alert" id="message" style="display: none;">用于发送提示消息</div>
                <div class="modal-body" id="modalBody">
                    <!-- 输入列表 -->
                    <div class="form-group">
                        <label>名称:</label>
                        <input type="text" id="tagname" class="form-control" name="tagname">
                    </div>

                    <div class="form-group">
                        <label>父节点:</label>
                        <input type="text" id="pname" class="form-control" name="pname">
                    </div>
                    <!-- 被点击的星球的id -->
                    <input id="tagid" type="hidden" value="" name="tagid">
                </div>
                <!-- 底栏 -->
                <div class="modal-footer">
                    <button id="tag_delete" type="button" class="btn btn-danger">删除标签</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button id="submit" type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- 3 星图，echarts -->
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('chart'), 'wonderland');
    var datas = {{ datas | tojson | safe }};  // tojson过滤，将True变成true
    var option;  // 以便事件监听，动态更新

    // 0 图表切换
    // - 备注：当作切换一次皮肤，重新请求数据，是不是更简洁？
    // var x = Math.round(Math.random() * 100);
    var x = 1;
    var current_chart = x % 2;  // 图表随机2选1, 0 tree，1 map
    function set_tree() {
        // // 0 自定义重写
        // - 0.1 接受后端的data，是一颗树
        res_data = function (data) {
            return [data]; //tree
        }
        // - 0.2 操作option中的data，因地制宜
        del_children = function (data) {
            return data[0].children; //tree
        }

        // 1 图表配置
        option = {
            title: {
                text: `合计：${datas.value}h`,
                right: 'right',
            },
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [{
                type: 'tree',
                data: res_data(datas),
                top: '10%',
                bottom: '10%',
                layout: 'radial',
                symbol: 'emptyCircle',
                symbolSize: 7,
                initialTreeDepth: 2,
                animationDurationUpdate: 750,
                emphasis: {
                    focus: 'descendant'
                },
                roam: true, //鼠标缩放
                draggable: true, //可拖拽
                // label: { show: true, fontSize: 12},  // 注释时对series的整体label操作就失效
            }]
        }

        myChart.setOption(option);
    }
    function set_map() {
        // 0 自定义重写
        // - 0.1 接受后端的data，是一颗树
        res_data = function (data) {
            return data.children; //sun
        }
        // - 0.2 操作option中的data，因地制宜
        del_children = function (data) {
            return data; //sun
        }

        // 1 图表配置
        function getLevelOption() {
            return [
                {
                    itemStyle: {
                        borderColor: '#777',
                        borderWidth: 0,
                        gapWidth: 1
                    },
                    upperLabel: {
                        show: false
                    }
                },
                {
                    itemStyle: {
                        borderColor: '#555',
                        borderWidth: 5,
                        gapWidth: 1,
                    },
                    emphasis: {
                        itemStyle: {
                            borderColor: '#ddd'
                        }
                    }
                },
                {
                    itemStyle: {
                        borderWidth: 2,
                        gapWidth: 1,
                        borderColorSaturation: 0.7,
                    }
                },
                {
                    colorSaturation: [0.35, 0.4],
                    itemStyle: {
                        borderWidth: 5,
                        gapWidth: 1,
                        borderColorSaturation: 0.6, // 边框饱和度
                    }
                },     
                
            ];
        }
        function getToolOption(info) {
            return ['<div class="tooltip-title">' + info.name + '</div>', 'time: ' + info.value + 'h'].join('');
        }
        option = {
            title: {
                text: `合计：${datas.value}h`,
                right: 'right',
            },
            tooltip: {
                formatter: getToolOption,
            },
            series: [{
                type: 'treemap',
                data: res_data(datas),
                upperLabel: {
                    show: true,
                    height: 30,
                },
                levels: getLevelOption(),
            }],
            // 手机端适应
            media: [
                {
                    // 移动端更充分地占用屏幕
                    query: {maxWidth: 1000},
                    option: {
                        textStyle: {
                            fontSize: '1.3rem',
                        },
                        title: {
                            textStyle: {
                                fontSize: '1.5rem',
                            }
                        },
                        series: [{
                            width: '100%',
                            height: '85%',
                            // 面包屑导航
                            breadcrumb: {
                                height: 50,
                                emptyItemWidth: 50,  // 控制每个导航项的最小宽度
                                itemStyle: {
                                    textStyle: {
                                        fontSize: '1.5rem',
                                    }
                                }
                            }
                        }],
                    }
                }
            ]
        };

        myChart.setOption(option);
    }
    current_chart ? set_map() : set_tree();
    $("#change_chart").click(function () {
        current_chart = (current_chart + 1) % 2;
        current_chart ? set_map() : set_tree();
    })

    // 1.1 监听 zoom 事件，当缩放发生时执行对应的处理程序
    myChart.on('treeroam', function (params) {
        // 备注：连续缩放时，会导致明显的卡顿。
        // 备注：每个node的size单独操作呢？
        var scale = params.zoom;  // 拖拽事件会得到undefine，可查看echarts的event相关文档

        var label = option.series[0].label;
        if (scale) {
            scale = scale > 1 ? 1.1 : 0.9090909090909090909  // 比图像比例迟缓，且缩和放是可逆的
            var oriSize = label.fontSize;
            var labelFontSize = oriSize * scale; // 例如，按比例缩放字体大小
            console.log('graphroam', scale, labelFontSize);

            label.fontSize = labelFontSize;
            myChart.setOption(option);
        }
    });

    // 2 双击星球 —> 唤出模态框
    var open_modal = function (params) {     
        console.log(params.name, params.value, params.data);

        var modal = $('#tagModal');
        modal.modal('show');
        modal.find('.modal-title').text(params.name);
        modal.find('input#tagname').val(params.name);
        modal.find('input#tagid').val(params.data.id);  // 
        
        // 找父节点
        find_parent = function (node) {
            var childs = node.children;
            for (var i = 0; i < childs.length; i++) {
                if (childs[i].name == params.data.name) {
                    modal.find('input#pname').val(node.name);
                    return true
                } else {
                    if (find_parent(childs[i])) { return true; }
                }
            }
        }
        // 数据格式：0(tree)是[root]，1(map)是[tag1, tag2, ...]
        var data = option.series[0].data;
        var root = current_chart ? {children:data} : data[0];
        find_parent(root)
    }
    
    // 自定义双击逻辑
    let lastClickTime = 0;
    const doubleClickDelay = 800; // 毫秒
    myChart.on('click', function (params) {
        const currentTime = new Date().getTime();
        if (currentTime - lastClickTime < doubleClickDelay) {
            open_modal(params);
            console.log('Double click detected!');
        }
        lastClickTime = currentTime;
    });
 
    // 3 模态框隐藏 -> 清空内容
    $('#tagModal').on('hidden.bs.modal', function (e) {
        // 备注：怎么能直接刷新为初始状态，不用一个个操作？
        // 刷新表单值
        $('form input').val('');
        // 刷新填入的标签元素 (现在多余了)
        var clearIds = ['childs'];
        for (var i = 0; i < clearIds.length; i++) {
            var container = document.getElementById(clearIds[i]);
            container.innerHTML = '';
        }
    });

    // 4 新建标签 - 唤出模态框
    $('#tag_create').on('click', function (e) {
        var modal = $('#tagModal');
        modal.modal('show');
        modal.find('.modal-title').text('新的标签');
    });

    // 5 新建标签 - 异步发送表单请求，动态更新
    $('#submit').on('click', function (e) {
        e.preventDefault();
        var formData = $('#tagForm').serialize(); // 序列化表单数据
        // console.log(formData);
        $.ajax({
            url: "{{ url_for('tag.tag_node') }}",
            type: 'POST',
            data: formData,
            success: function (response) {
                console.log('res', response);
                // response已经是js原生类型，再用JSON.parse解析会报错
                var res = response;
                console.log(res);
                if (res.success) {
                    $('#message').text('操作成功').show();
                    $.ajax({
                        // 备注：这个ajax请求写得简洁，其它都有大段的非核心代码。
                        url: "{{ url_for('tag.get_tree_data', time_id=time_id) }}",
                        type: 'GET',
                        success: function (response) {
                            var data = response;
                            // option.series[0].data[0] = data;
                            option.series[0].data = res_data(data);
                            myChart.setOption(option);
                        }
                    })

                    setTimeout(function () {
                        $('#message').hide();
                        $('#tagModal').modal('hide');
                    }, 500);
                } else {
                    $('#message').text(res.message).show();
                    setTimeout(function () {
                        $('#message').hide();
                    }, 1500);
                }
            },
            error: function (xhr, status, error) {
                console.error('Error', error);
            },
        });
    });

    // 6 删除标签 - 异步请求
    $('#tag_delete').on('click', function (e) {
        // 备注：好多样板代码
        var formData = $('#tagForm').serialize(); // 序列化表单数据
        $.ajax({
            url: "{{ url_for('tag.tag_delete') }}",
            type: 'POST',
            data: formData,
            success: function (res) {
                if (res.success) {
                    // 动态更新，删除对应node
                    var id = $('#tagid').val();
                    console.log(id);

                    // 找到id对应的标签，在tree中删除
                    // 备注：子节点会丢失，刷新后才显示
                    var data = option.series[0].data;
                    children = del_children(data)
                    del_node = function (childs, id) {
                        for (var i = 0; i < childs.length; i++) {
                            if (childs[i].id == id) {
                                console.log('del_node', childs[i]);
                                childs.splice(i, 1);
                                return true;
                            } else {
                                if (del_node(childs[i].children, id)) { return true; }
                            }
                        }
                    }
                    del_node(children, id);
                    myChart.setOption(option);

                    $('#message').text('操作成功').show();
                    setTimeout(function () {
                        $('#message').hide();
                        $('#tagModal').modal('hide');
                    }, 500);
                } else {
                    $('#message').text('操作失败').show();
                    setTimeout(function () {
                        $('#message').hide();
                    }, 1500);
                }
            },
            error: function (xhr, status, error) { console.error('Error', error); },
        });
    });

</script>
{% endblock %}